<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">

	<title>Anything Zoomer | Image</title>

	<link href="http://fonts.googleapis.com/css?family=Merienda+One" rel="stylesheet">
	<link rel="stylesheet" href="demo/style.css">
	<link rel="stylesheet" href="css/anythingzoomer.css">

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
	<script src="js/jquery.anythingzoomer.js"></script>
	<style>
	/* FOR IMAGE DEMO */
	.small img { width: 250px; height: 167px; }
	.large img { width: 500px; height: 333px; }

	.small img.kyptos { width: 320px; height: 240px; }
	.large img.kyptos { width: 800px; height: 600px; }
	</style>

	<script>
	$(function() {

		$(".zoom").anythingZoomer();

		$("button").click(function(){
			$(this).toggleClass('kyptos');
			var img = ($(this).hasClass('kyptos')) ? 'kryptos-front' : 'rushmore';
			$('.large').find('img').toggleClass('kyptos').attr('src', 'demo/' + img + '.jpg');
			$('.small').find('img').toggleClass('kyptos').attr('src', 'demo/' + img + '_small.jpg');
			// update plugin
			$('.zoom').anythingZoomer();
		});

	});
	</script>
</head>
<body id="swap">

<div id="main-content">

	<h1>AnythingZoomer<sup>2</sup></h1>

	<a href="https://github.com/CSS-Tricks/AnythingZoomer/zipball/master" id="dl">Download</a>

	<ul id="nav">
		<li><a href="index.html">Calendar</a></li>
		<li><a href="image.html">Image</a></li>
		<li><a class="current" href="swap.html">Swap</a></li>
		<li><a href="text.html">Text</a></li>
		<li><a href="double.html">Double</a></li>
		<li><a class="use" href="use.html">Usage</a></li>
		<li><a class="play" href="http://jsfiddle.net/Mottie/6sp2b/">Playground</a></li>
		<li><a class="issue" href="https://github.com/CSS-Tricks/AnythingZoomer/issues">Issues</a></li>
	</ul>

	<h2>Swap Demo</h2>

	<p>
		<ul class="info">
			<li>AnythingZoomer can now be called to update its contents dynamically.</li>
			<li>Just click the "Swap image" button to toggle between two sets of images.</li>
		</ul>
	</p>

	<p>
		<button>Swap image</button>
	</p>

	<hr>

	<div class="zoom">

		<div class="small">
			<img src="demo/rushmore_small.jpg" alt="small rushmore">
		</div>

		<div class="large">
			<img src="demo/rushmore.jpg" alt="big rushmore">
		</div>

	</div>

</div>

</body>

</html>